<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2017/12/5
  Time: 23:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html>
<head>
    <title>文章详情</title>
    <meta charset="utf-8">
    <jsp:include page="../common/portal-head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/article.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/comment.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/page.css">
</head>
<body>
<div class="page-container">
    <jsp:include page="../portal/topmenu.jsp"></jsp:include>
    <div class="content-wrap" id="articlePage">
        <div class="article-wrap">
            <div id="articleinfo">
                <div class="now-location" id="nowlocation">
                    <span id="location">当前位置:</span>
                    <a href="${ctx}/infolist/index">文章资讯></a>
                    <a  v-bind:href="['${ctx}/articledetail/index/'+article.id]">{{article.main_title}}</a>
                </div>
                <div class="article-title">
                    <h1>{{article.main_title}}</h1>
                    <span id="author">原创</span>
                    <span>{{article.user_nickname}}</span>
                    <span>{{article.create_time | formatDate}}</span>
                </div>
                <hr>
                <div class="art-content" v-if="!error" v-html="article.content">
                </div>
                <div v-if="error" class="alert alert-danger">{{error_tip}}</div>
            </div>
            <div class="collect-wrap" v-if="!error">
                <span id="collect-button">
                    <img :src="is_collected?'${ctx}/resources/portal/img/arcticle_collect_af.png':'${ctx}/resources/portal/img/arcticle_collect_bf.png'" v-on:click="collect()">
                    收藏
                </span>
                <span id="agree-button">
                    <img :src="is_liked?'${ctx}/resources/portal/img/arcticle_agree_af.png':'${ctx}/resources/portal/img/arcticle_agree_bf.png'" v-on:click="like()">
                    点赞
                </span>
            </div>
            <div v-if="!error" class="commentAll">
                <!--评论区域 begin-->
                <div class="comment-num">
                    <span id="comment-num">{{article.comments_count}}</span><span>条评论</span>
                </div>
                <c:if test="${!empty username}">
                <div class="reviewArea clearfix">
                    <div class="comment-show-con-img pull-left"><img src="${ctx}/resources/portal/img/header-img-comment_03.png" alt=""></div>
                    <textarea class="content comment-input" placeholder="写下您的评论&hellip;"  id="commentInput"></textarea>
                    <a href="javascript:;" class="plBtn" v-on:click="addComment('commentInput')">评论</a>
                </div>
                </c:if>
                <!--评论区域 end-->
                <!--回复区域 begin-->
                <div class="comment-show">
                    <div class="comment-show-con clearfix" v-for="(comment,index) in commentList" :key="'comment-'+index">
                        <div class="comment-show-con-img pull-left">
                            <img :src="comment.user_head_img_url" alt="">
                        </div>
                        <div class="comment-show-con-list pull-left clearfix">
                            <div v-if="comment.to_user_id!=''"class="pl-text clearfix">
                                <a href="#" class="comment-size-name">{{comment.user_nickname}}@{{comment.to_user_nickname}}: </a>
                                <span class="my-pl-con">&nbsp;{{comment.content}}</span>
                            </div>
                            <div v-else class="pl-text clearfix">
                                <a href="#" class="comment-size-name">{{comment.user_nickname}} : </a>
                                <span class="my-pl-con">&nbsp;{{comment.content}}</span>
                            </div>

                            <div class="date-dz">
                                <span class="date-dz-left pull-left comment-time">{{comment.comment_time | formatDate}}</span>
                              <c:if test="${!empty username}">
                                <div  class="date-dz-right pull-right comment-pl-block">
                                    <!-- 				                        <a href="javascript:;" class="removeBlock">删除</a> -->
                                    <a href="javascript:;" v-bind:data-user="comment.user_id" v-bind:data-name="comment.user_nickname" v-bind:data-img="comment.user_head_img_url"  class="date-dz-pl pl-hf hf-con-block pull-left" v-on:click="setToUserInfo($event)"><img src="${ctx}/resources/portal/img/replay.png">回复</a>
                                    <!-- 				                        <span class="pull-left date-dz-line">|</span> -->
                                    <%--<a href="javascript:;" class="date-dz-z pull-left"  v-on:click="commentLike(index)"><i class="fa fa-thumbs-o-up"></i>点赞 (<i class="z-num">{{comment.like_count}}</i>)</a>--%>
                                </div>
                              </c:if>
                            </div>
                        </div>
                    </div>

                </div>
                <div style="display:none" class="hf-list-con" id="hf-textarea">
                    <div class="hf-con pull-left"> <textarea class="content comment-input hf-input" id="hf-commentInput"placeholder="" onkeyup="keyUP(this)"></textarea>
                        <a href="javascript:;" class="hf-pl"  v-on:click="cancelComment()">取消</a>
                        <a href="javascript:;" class="hf-pl"  v-on:click="addComment('hf-commentInput')">评论</a>
                </div>
                </div>
                <!--回复区域 end-->
            </div>
            <div v-if="!error" id="page" class="page_div"></div>
        </div>
        <div class="others-wrap">
            <div class="author-dsc-wrap">
                <div class="author-name" >
                    <img v-bind:src="article.user_head_img_url">
                    <span>{{article.user_nickname}}</span>
                </div>
                <div class="author-dsc">
                    <span><strong>作者简介：</strong>{{author.userDsc}}</span>
                </div>
            </div>
            <div class="advise-list">
                <div class="list-title">
                    <span> <img src="${ctx}/resources/portal/img/article_list_title.png">猜你喜欢</span>
                    <ul >
                        <li v-for="(ad,index) in adArticelList" :key="'ad-'+index" >
                            <a v-bind:href="['${ctx}/articledetail/index/'+ad.id]" target="_blank">
                            <img v-bind:src="ad.portal_img">
                            <div class="advice-article-name">
                                <span>{{ad.main_title}}</span>
                                <span class="time-span"><img src="${ctx}/resources/portal/img/areticle_time_logo.png">{{ad.create_time | formatDate}}</span>
                            </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../portal/footer.jsp"></jsp:include>
<script src="${ctx}/resources/portal/script/comment.js"  type="text/javascript"></script>
<script src="${ctx}/resources/portal/script/page.js"  type="text/javascript"></script>
<script src="${ctx}/resources/script/vue-date.js" type="text/javascript"></script>
<script type="text/javascript">

    var pageApp = new Vue({
        el:"#articlePage",
        data:{
            article_id:'${article_id}',
            user_id:'${uid}',
            author_id:"",
            userlogo:'${userLogo}',
            to_user_id:"",
            to_user_name:"",
            to_user_img:"",
            content:"",
            error:false,
            error_tip:'未找到文章信息',
            article:{},
            commentList:[
            ],
            adArticelList:[],
            author:{},
            is_collected:false,
            is_liked:false
        },
        filters: {
            /* 时间过滤器 */
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, "yyyy-MM-dd HH:mm:ss");
            }
        },
        methods:{
            loadArticleInfo:function(){
                var $this = this;
                var data ={article_id:$this.article_id};
                asyncAjax({
                    url: ctx + "/article/getArticleInfo?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        if (res["result"] == "0") {
                            if (!isEmpty(res["data"])) {
                                $this.article = res["data"];
                                $this.loadauthorInfo(res["data"].user_id)
                            }else {
                                $this.error = true;
                            }
                        } else {
                            bootbox.alert(res["msg"]);
                            $this.error = true;
                            $this.error_tip = res["msg"];
                        }
                    }

                })
            },
            loadauthorInfo:function (id) {
                var $this = this;
                if(id=="0"){
                    $this.author={
                        userLogo:$this.userLogo,
                        companyName:"内衣巴巴",
                        userDsc:"内衣巴巴平台"
                    }
                }
                else {
                    asyncAjax({
                        url: ctx + "/user/mgr/user/" + id,
                        success: function (res) {
                            if (res["result"] == "0") {
                                if (!isEmpty(res["data"])) {
                                    $this.author = res["data"];
                                }
                            } else {
                                bootbox.alert(res["msg"]);
                                $this.error = true;
                                $this.error_tip = res["msg"];
                            }
                        }

                    })
                }
            },
            loadLikeArticel:function(){
                var $this=this;
                var data = {pageNum:1,pageSize:5,sectionId:$this.article.section_id,type:1,ad_option:"BANNER"};
                asyncAjax({
                    url: ctx + "/article/getSearchList?" + $.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        if (res["result"] == "0") {
                            if (!isEmpty(res["data"])) {
                               $this.adArticelList=res["data"];
                            }
                        }
                        else {
                            bootbox.alert(res["msg"]);
                            $this.error = true;
                            $this.error_tip = res["msg"];
                        }
                    }

                })
    },
            addComment:function (id) {
                var $this = this;
                var content = $("#"+id).val()||"";
                var data ={article_id:$this.article_id,type:1,content:content,
                    to_user_nickname:$this.to_user_name,to_user_id:$this.to_user_id,to_user_head_img_url:$this.to_user_img};
                asyncAjax({
                    url: ctx + "/article/commentArticle",
                    dataType: 'json',
                    type:'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function (res) {
                        $("#hf-textarea").css('display','none');
                        $("#"+id).val("");
                        if (res["result"] == "0") {
                            if (!isEmpty(res["data"])) {
                                $this.commentList.push(res["data"]);
                            }
                        } else {
                            bootbox.alert(res["msg"]);
                        }
                    }

                })

            },
            setToUserInfo:function (event) {
                var $this = this;

                $this.to_user_id=event.target.getAttribute('data-user');
                $this.to_user_img=event.target.getAttribute('data-img');
                $this.to_user_name=event.target.getAttribute('data-name');
                $("#hf-textarea").css('display','block');
            },
            cancelComment:function(){
                $("#hf-textarea").css('display','none');
            },
            loadComments:function(pageNum){
                var $this = this;
                var data = {
                    pageNum:pageNum,
                    pageSize:5,
                    type:1,
                    article_id:$this.article_id
                }
                asyncAjax({
                    url: ctx + "/article/getCommentsList?"+$.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        if (res["result"] == "0") {
                            if (!isEmpty(res["data"])) {
                                $this.commentList=res["data"];
                                $("#page").paging({
                                    pageNo: pageNum || 1,
                                    totalPage: Math.ceil(res.total / 5),
                                    totalSize: res.total,
                                    callback: function (num) {
                                        $this.loadComments(num);
                                    }
                                })
                            }
                        } else {
                            bootbox.alert(res["msg"]);
                            $this.error_tip = res["msg"];
                        }
                    }

                })
            },
            collect:function(){
                var $this=this;
                var data ={article_id:this.article_id,flag:true}
                asyncAjax({
                    url: ctx + "/article/articleCollect?"+ $.param(data).replace(/(%5D|%5B)/g, ""),
                    success: function (res) {
                        if (res["flag"]) {
                            $this.is_collected = true;
                        } else {
                            bootbox.alert(res["msg"]);
                            $this.error_tip = res["msg"];
                        }
                    }

                })
            },
            like:function(){
                var $this=this;

                var data ={article_id:$this.article_id,type:0};
                asyncAjax({
                    url: ctx + "/article/commentArticle",
                    dataType: 'json',
                    type:'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function (res) {
                        if (res["result"] == "0") {
                            if (!isEmpty(res["data"])) {
                                $this.is_liked = true;
                            }else {
                            }
                        } else {
                            bootbox.alert(res["msg"]);
                            $this.error_tip = res["msg"];
                        }
                    }

                })
            }
        },
        mounted:function(){
            this.loadArticleInfo();
            this.loadComments(1);
            this.loadLikeArticel();
        }
    })
    //分页
//    $("#page").paging({
//        pageNo:5,
//        totalPage: 9,
//        totalSize: 300,
//        callback: function(num) {
//            alert(num)
//        }
//    })
</script>
</body>
</html>
